<template>
  <live-open-layout>
    <div class="_events-wrapper" :class="{ _mobile: isMobile }">
      <!-- <div class="_events-list">
        <div
          class="_events-item _click"
          :class="{ _active: selectValue.label === item.label }"
          v-for="item in eventsTypes"
          :key="item.label"
          @click="selectValue = item"
        >
          <span class="_text-middle">{{ item.label }}</span>
        </div>
      </div> -->

      <component class="_events-comp" :is="eventsTypes[1].comp" />
    </div>
  </live-open-layout>
</template>

<script lang="tsx" setup>
import { useMedia } from "@/hooks/useMedia";
import LiveOpenLayout from "@/layout/live-open-layout/live-open-layout.vue";

import { eventsTypes } from "./index";

const isMobile = useMedia();

// const selectValue = ref<(typeof eventsTypes)[0]>(eventsTypes[0]);
</script>

<style lang="less" scoped>
._events-wrapper {
  @apply flex flex-col;
  gap: 0.75rem;
  padding: 2.31rem 0 2.06rem;
  ._events-list {
    @apply flex items-center;
    padding: 0.25rem;
    height: 3.38rem;
    background: #232829;
    border-radius: var(--el-border-radius-base);
    ._events-item {
      @apply flex-1 w-0 flex items-center justify-center h-full;
      &._active {
        background: #353636;
        border-radius: inherit;
      }
    }
  }

  &._mobile {
    padding: 1.75rem 0.94rem;
  }
}
</style>

<style lang="less">
._events-comp {
  .el-table {
    background-color: transparent;
    .el-table__inner-wrapper {
      &::before {
        display: none;
      }
    }

    * {
      background-color: transparent !important;
      border-color: #464a4b !important;
    }
  }
}
</style>
